<template>
    <div class="resource-tab">
        <div class="tabs-content">
            <div class="tabs-sticky">
                <pui-tabs ref="tabsRef" round :tabList="mainRef.tabList" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
            </div>
            <div class="tabs-tree">
                <pui-tree :show="mainRef.showCompoTree" v-show="mainRef.nowTab === 'Component'" :dataList="mainRef.resourceObj.Component" @onNodeClick="treeItemclick"></pui-tree>
                <pui-tree :show="true" v-show="mainRef.nowTab === 'Example'" :dataList="mainRef.resourceObj.Example"></pui-tree>
                <pui-tree :show="mainRef.showProjectTree" v-show="mainRef.nowTab === 'Project'" :dataList="mainRef.resourceObj.Project"></pui-tree>
            </div>
        </div>
        <div class="file-content">
            <div class="file-list" v-show="mainRef.nowTab === 'Component'">
                <div v-for="(item, i) in libraryList" :key="i" :class="['file-container',
                    (libraryList.length % 2 === 0 && (i === libraryList.length - 1 || i === libraryList.length - 2) ||
                    libraryList.length % 2 !== 0 && i === libraryList.length - 1) && 'nom']" @click="onItemClick(item, i)">
                    <Draggable :data="item">
                        <div class="file-item">
                            <img :src="getIcons(item.value)" />
                            <span class="name">{{item.label}}</span>
                        </div>
                    </Draggable>
                </div>
            </div>
            <div class="file-list" v-show="mainRef.nowTab !== 'Component'">
                <div v-for="(item, i) in libraryList" :key="i" :class="['file-container',
                    (libraryList.length % 2 === 0 && (i === libraryList.length - 1 || i === libraryList.length - 2) ||
                    libraryList.length % 2 !== 0 && i === libraryList.length - 1) && 'nom']" @click="onExamItemClick(item, i)">
                    <div class="file-item">
                        <img :src="getIcons(item.value)" draggable="false" />
                        <span class="name">{{item.label}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ResourceTab'
})
</script>
<script lang="ts" setup>
import { reactive, watch, nextTick, computed, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { libraryManager } from '@/services/phot_client/library'
import Draggable from '@/views/draggable/draggable.vue'
import { convertToNestedObject } from '@/utils'
const { proxy } = getCurrentInstance() as any

const store = useStore()
const emit = defineEmits({
    'openExampleGraph': (val: any) => {}
})

const componentResource = computed(() => {
    if (store.state.libraryList.length > 0) {
        return store.state.libraryList
    }
    return []
})
const getIcons = (name: any) => {
    try {
        const icon = require(`@/assets/icons/components/${name}.svg`)
        return icon
    } catch {
        return require(`@/assets/icons/unknown.svg`)
    }
}
const mainRef = reactive({
    nowTabIndex: '0',
    nowTab: 'Component',
    showFilter: false,
    activeIndex: '',
    showCompoTree: false,
    showProjectTree: false,
    tabList: [
        {
            name: '组件库',
            id: '0',
            value: 'Component'
        },
        {
            name: '示例库',
            id: '1',
            value: 'Example'
        },
        {
            name: '工程',
            id: '2',
            value: 'Project'
        }
    ] as any[],
    nowResource: [
        {
            label: '单模单芯单偏振的光纤仿真系统',
            value: '0-1-1-1',
        }
    ] as any[],
    resourceObj: {
        Component: [{
            label: 'Component',
            value: 'Component',
            children: componentResource
        }],
        Example: [{
            label: 'Example',
            value: 'Example',
            children: [
                {
                    label: '系统仿真',
                    value: 'system',
                    children: [
                        {
                            label: '光纤传输系统仿真',
                            value: 'example',
                            path: '光纤传输系统仿真.phtg'
                        }
                    ]
                },
                // {
                //     label: '模块仿真',
                //     value: 'module',
                //     children: [
                //         {
                //             label: '光纤传输模块仿真',
                //             value: 'example',
                //             path: '光纤传输模块仿真.phtg'
                //         }
                //     ]
                // }
            ]
        }],
        Project: [{
            label: 'Project',
            value: 'Project',
            children: []
        }],
    } as any,
    currentCompoProp: ''
})
const libraryList = computed(() => {
    if (mainRef.nowTab === 'Component') {
        if (store.state.libraryList.length > 0) {
            mainRef.showCompoTree = true
            const currentLibrary: any = store.state.libraryList.filter((item: any) => item.value === mainRef.currentCompoProp)
            return currentLibrary[0]?.children
        }
        mainRef.showCompoTree = false
        return []
    }
    if (mainRef.nowTab === 'Example') {
        return [
            {
                label: '光纤传输系统仿真',
                value: 'example',
                path: './examples/光纤传输系统仿真.phtg'
            },
            // {
            //     label: '光纤传输模块仿真',
            //     value: 'example',
            //     path: './examples/光纤传输模块仿真.phtg'
            // }
        ]
    }
    if (mainRef.nowTab === 'Project') {
        return []
    }
})
const tabClickHandle = (e:any) => {
    mainRef.nowTabIndex = e.id
    mainRef.nowTab = e.value
}
const onItemClick = async (item: any, index: any) => {
    console.log(item)
    mainRef.activeIndex = index
    await getComponentPrototype(item.component)
}
const treeItemclick = (e: any) => {
    console.log(e)
    if (e.children && e.path) {
        mainRef.currentCompoProp = e.value
    }
}
const onExamItemClick = async (item: any, index: any) => {
    emit('openExampleGraph', item)
}
const getComponentPrototype = async (component: any) => {
    console.log("getComponentPrototype")
    console.log(component)
    const res: any = await libraryManager.getComponentPrototype(component.path)
    console.log(res)
}
const init = (e: any) => {
    if (e.path) {
        const arr = e.path.split('/')
        const pathArr = e.path.split('/').splice(1)
        const projectDir = [pathArr[pathArr.length - 2], pathArr[pathArr.length - 1]]
        const projectDirTip = arr.slice(0, arr.length - 1).join('/')
        const projectTree = convertToNestedObject(projectDir)
        projectTree.tip = projectDirTip
        const tree = [projectTree]
        mainRef.resourceObj.Project = tree
        mainRef.showProjectTree = true
        mainRef.nowTabIndex = '2'
        mainRef.nowTab = 'Project'
        proxy.$refs.tabsRef.updateCurrentIndex()
    } else {
        mainRef.resourceObj.Project = [{
            label: 'Project',
            value: 'Project',
            children: []
        }]
    }
}

defineExpose({
    init
})
</script>